<template>
    <div class="box">
        <headers title="我的"></headers>
        <div class="main">
            <div style="display: flex; align-items: center;">
                <img src="../../../assets/bg.png" alt="" srcset="" style="width: 5rem;height: 5rem;border-radius: 50%;">
                {{ name }}
            </div>
            <div>
                <p>账号管理</p>
            </div>
        </div>
        <van-cell-group>
            <van-cell title="我的订单" value="全部订单" />
        </van-cell-group>
        <van-grid :column-num="5">
            <van-grid-item icon="column" text="待付款" />
            <van-grid-item icon="point-gift" text="待收货" />
            <van-grid-item icon="map-marked" text="待评价" />
            <van-grid-item icon="completed" text="已完成" />
            <van-grid-item icon="user" text="售后服务" />
        </van-grid>
        <van-cell-group>
            <van-cell icon="location" title="收获地址" />
            <van-cell icon="coupon" title="我的资金券" />
            <van-cell icon="coupon" title="我的商品券" />
            <van-cell icon="description" title="我的发票" />
            <van-cell icon="records" title="账户信息" value="请先完善" />
            <van-cell icon="friends" title="关于我们" />
        </van-cell-group>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import headers from '@/components/headers.vue';
import { useCounterStore } from '@/stores/counter'
// 在组件内部的任何地方均可以访问变量 `store` ✨
const store = useCounterStore()
let name = ref('')
name.value = store.user
</script>

<style lang="scss" scoped>
.box {
    .main {
        width: 100%;
        height: 20%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        background: blue;
        color: white;
    }
}
</style>